import React, { memo, Suspense, useEffect } from "react"
import type { FC, ReactNode } from 'react'
import { shallowEqual } from "react-redux"
import { Link,Outlet } from "react-router-dom"

import { increment } from '../../store/modules/home'
import { useAppSelector,useAppDiapatch } from '../../store'

interface IProps {
  children?: ReactNode
}

const Mine: FC<IProps> = () =>{
  const { count } = useAppSelector((state) =>{
    return {
      count: state.home.counter
    }
  },shallowEqual)

  const dispatch = useAppDiapatch()

  function countClick(){
    dispatch(increment(10))
  }
  useEffect(() =>{
    console.log('模拟网络请求')
  },[])

  return (
    <div>
      <h1>Mine counter:{count}</h1>
      <button onClick={countClick}>changeCount</button>
      <Link to='/mine/childone'>one</Link>
      <Link to='/mine/childtwo'>two</Link>
      <Suspense fallback="">
        <Outlet />
      </Suspense>
    </div>
  )
}

export default memo(Mine)